<template>
  <!--排行榜-->
  <div class="div4">
    <ul class="warp">
      <li
        v-for="(val,index) in titleInfo"
        :key="index"
        :style="{backgroundPositionX:displacement*index+'px'}"
      >
        <h3>巅峰榜</h3>
        <h2>{{val.text}}</h2>
        <img src="@/assets/img/play.png" width="50px" alt />
        <div class="songText" v-for="(v,i) in val.info" :key="i" v-if="val.info">
          <p @click="skipGrabble('playSong',v.id)">
            <span>{{i+1}}</span>
            {{v.name}}
          </p>
          <p @click="skipGrabble('GrabbleType100',v.ar[0].id)">{{v.ar[0].name}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import require from "requests/recommend";
export default {
  name: "dive",
  data() {
    return {
      titleInfo: [
        { text: "新歌榜", info: null },
        { text: "热歌榜", info: null },
        { text: "原创歌曲榜", info: null },
        { text: "飙升榜", info: null },
        { text: "电音榜", info: null }
      ],
      displacement: -224
    };
  },
  methods: {
    getNotice(number,info) {
      require.ranking(number).then(res => {
        this.titleInfo[number].info=res.data.playlist.tracks.slice(0,5)
        //console.log(res.data.playlist.tracks.slice(0,5));
      });
    },
    skipGrabble(path, val) {
      const newUrl=this.$router.resolve({
        name: path,
        query: {
          keyWord: val
        }
      })
      window.open(newUrl.href,'_blank')
    }
  },
  mounted() {
    //this.getNotice(0);
    this.titleInfo.forEach((val,index)=>{
        this.getNotice(index)
    })
  }
};
</script>

<style lang="less" scoped>
.div4 {
  ul.warp {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    li {
      width: 200px;
      height: 500px;
      background: #000;
      background-image: url(~@/assets/img/homebeijing.jpg);
      //background-position-x:-224px;
      color: #fff;
      font-family: "Courier New", Courier, monospace;
      h3,
      h2 {
        margin: 15px 0;
        font-weight: 400;
        text-align: center;
      }
      img {
        margin: 0 auto;
        display: block;
      }
      .songText {
        margin: 10px 0px;
        text-align: center;
        p:hover {
          color: #31c27c;
        }
      }
    }
  }
}
</style>